import React, { Component } from 'react'
import { Card, Table } from 'antd'
import '../../less/index.less'
import '../../less/program-list.less'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import UrlPattern from 'url-pattern'
import * as taskActions from '../../actions/task'
import { FormattedMessage } from 'react-intl'
import { convertContent } from '../../constant/lang-util'

class Feedback extends Component {
  constructor (props) {
    super(props)
    this.state = {
      taskId: 1
    }
  }

  componentDidMount () {
    const pattern = new UrlPattern('/program/:programId/task/:taskId/suggestion')
    const urlParams = pattern.match(this.props.location.pathname) || {}

    this.setState({
      taskId: urlParams.taskId
    }, () => {
      this.props.getTaskSuggestion(this.state.taskId)
      this.props.getTask(this.state.taskId)
    })
  }

  render () {
    const columns = [{
      title: <FormattedMessage id='吐槽者' />,
      dataIndex: 'userName',
      width: '10%'
    }, {
      title: <FormattedMessage id='内容' />,
      dataIndex: 'content',
      width: '70%'
    }, {
      title: <FormattedMessage id='时间' />,
      dataIndex: 'createTime'
    }]
    const currentTaskInfo = this.props.currentTask
    const currentTask = currentTaskInfo.task
    const taskUserSuggestions = this.props.taskUserSuggestions
    const taskSuggestions = taskUserSuggestions.map((taskUser) => {
      taskUser.taskSuggestion.userName = taskUser.studentInfo.userName
      taskUser.taskSuggestion.createTime = taskUser.taskSuggestion.createTime.split(' ')[0]
      return taskUser.taskSuggestion
    })

    return (
      <Card title={currentTask.title + convertContent('的吐槽管理')} bordered={false}>
        <Table columns={columns} dataSource={taskSuggestions} rowKey={record => record.id} />
      </Card>
    )
  }
}

const mapStateToProps = state => ({
  taskUserSuggestions: state.taskUserSuggestions,
  currentTask: state.taskInfo
})

const mapDispatchToProps = dispatch => ({
  getTaskSuggestion: (taskId) => dispatch(taskActions.getTaskSuggestion(taskId)),
  getTask: (taskId) => dispatch(taskActions.getTask(taskId))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Feedback))
